<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="105px"
    label-position="left"
    class="pg-user-add-user">
    <el-dialog
      :title="`注册新用户`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 表单主题
      -------------------------- -->
    
      <el-form-item 
        label="用户手机号"
        prop="mobile"
        :rules="[
          { required: true, message: '请输入用户手机号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]">
        <el-input v-model="addEditForm.mobile"
          placeholder="请输入用户手机号"></el-input>
      </el-form-item>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { AccountService } from 'services/Api'
import { RegExService } from 'services/Util'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgTypeAddtype',
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin
  ],
  data () {
    return {
      addEditForm: {
        mobile: ''
      }
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 添加参数
    addParam () {
      return {
        acc_id: this.acc_id,
        mobile: String(this.addEditForm.mobile)
      }
    }
  },
  methods: {
    // 手机号验证
    validatePhone (rule, value, cb) {
      if (RegExService.phone(value)) {
        cb()
      } else {
        cb(new Error('这不是一个有效的手机号'))
      }
    },
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        mobile: ''
      }
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 添加接口
    currentAddApi () {
      return AccountService.createUser(this.addParam)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(user-add-user) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
}
</style>
